<template>
  <el-dialog v-model="visible" title="换床" width="420px" append-to-body>
    <div class="change-info">
      <span>患者姓名：</span>
      <span class="strong">{{ patient?.patientName || '-' }}</span>
      <span class="split">当前床位：</span>
      <span class="strong">{{ currentBedNo || '-' }}床</span>
    </div>

    <div class="change-tip">请选择转移床位</div>

    <div class="bed-grid">
      <button
        v-for="b in beds"
        :key="String(b.bedId || b.bedNo)"
        class="bed-cell"
        :class="{ disabled: isDisabled(b), active: isActive(b) }"
        :disabled="isDisabled(b)"
        @click="select(b)"
      >
        {{ formatBedNo(b) }}
      </button>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="ChangeBedDialog">
import { changeBed } from '@/api/nurseWork/beds.js'
const proxy = getCurrentInstance().proxy

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  patient: { type: Object, default: () => ({}) },
  currentBedNo: { type: String, default: '' },
  beds: { type: Array, default: () => [] }
})
const emits = defineEmits(['update:modelValue', 'confirm', 'cancel'])
const visible = computed({ get: () => props.modelValue, set: v => emits('update:modelValue', v) })
const selected = ref(null)

const isDisabled = b => {
  if (b.status && b.status !== 'empty' && b.status !== 'virtual') return true
  if (b.patient) return true
  if (formatBedNo(b) === props.currentBedNo) return true
  return false
}
const isActive = b => selected.value && (selected.value.bedId === b.bedId || selected.value.bedNo === b.bedNo)
const select = b => {
  if (isDisabled(b)) return
  selected.value = b
}
const formatBedNo = b => {
  const no = String(b.bedNo ?? '')
  if (/^拟/.test(no)) return no
  const pure = no.replace(/床$/,'')
  return String(pure).padStart(2, '0')
}
const confirm = () => {
  if (!selected.value) {
    cancel()
    return
  }
  changeBed({
    id: props.patient.admissionId,
    bedId: selected.value.bedId
  }).then(res => {
    if (res.code === 200) {
      emits('confirm', selected.value)
      proxy.$modal.notifySuccess('换床成功')
      visible.value = false
    }
  })
}
const cancel = () => {
  emits('cancel')
  visible.value = false
}
</script>

<style scoped lang="scss">
@use '@/assets/styles/variables.module.scss' as *;
.change-info {
  display: flex;
  gap: 8px;
  align-items: center;
}
.strong {
  color: #606266;
  font-weight: 600;
}
.split {
  margin-left: 12px;
}
.change-tip {
  margin: 12px 0 8px;
  color: #606266;
}
.bed-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.bed-cell {
  height: 36px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  background: #fff;
  color: #606266;
  cursor: pointer;
}
.bed-cell:hover {
  background: var(--el-fill-color-light);
}
.bed-cell.disabled {
  background: #e5e7eb;
  color: #a8abb2;
  cursor: not-allowed;
}
.bed-cell.active {
  background: var(--el-color-primary);
  color: #fff;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}
</style>